<template>
  <div class="main-content">
    <div style="display: flex; align-items: flex-start; grid-gap: 10px">

      <div style="width: 150px" class="card0">
        <button style="width: 100px" class="top" @click="toTop">返回顶部</button>
      </div>
      <div style="flex: 1;">
        <BlogList />

        <Footer />
      </div>
      <div style="width: 260px">
        <div class="card" style="margin-bottom: 10px">
          <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px">欢迎您！(ﾉ´ヮ`)ﾉ*: ･ﾟ</div>
          <div style="color: #666">今天天气很好</div>
        </div>

        <div class="card" style="margin-bottom: 10px">
          <div style="display: flex; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #ddd">
            <div style="font-size: 20px; flex: 1">文章榜单</div>
            <div style="font-size: 12px; color: #666; cursor: pointer;"> 换一换</div>
          </div>
          <div>
          </div>

        </div>

      </div>

    </div>
  </div>
</template>

<script>

import Footer from "@/components/Footer";
import BlogList from "@/components/BlogList";
export default {
  components: {
    Footer,
    BlogList
  },
  mounted() {
    this.toTop()
  },
  methods: {
    toTop() {
      document.documentElement.scrollTop = 0;
    }
  }
}
</script>

<style>
.card0 {
  background-color: #fefefe;
  box-shadow: -3px 1px 2px 1px rgba(69, 68, 68, 0.082);
  border-radius: 5px;
  height: 80px;
}
.top {
  background-color: #238cdc;
  color: #fff;
  border-style: none;
  border-radius: 5px;
  text-align: center;
  padding: 10px 0;
  margin-top: 20px;
  margin-left: 25px;
  font-size: 16px;
  cursor: pointer;
  position: fixed;
}
a{
  color: #000b17;
}
</style>
